<template>
    <div class="modify-popup-main">
        <el-drawer v-model="show" title="修改价格" direction="rtl" size="50%">
            <div class="modify-table">
                <div class="title">
                    <img src="@/assets/imgs/mall/order/icon_01.png" alt="" />
                    <div>只有未付款订单支持改价，修改后请联系买家刷新订单核实金额后再支付</div>
                </div>
                <el-form ref="ruleFormRef" :model="props.goodsInfo" @submit.prevent>
                    <el-table
                        :data="props.goodsInfo.goods"
                        stripe
                        :header-cell-style="{ background: '#F9F9F9' }"
                        style="width: 100%">
                        <el-table-column prop="goodsName" label="商品" />
                        <el-table-column label="单价(元)">
                            <template #default="scope">
                                {{ floatDivide(scope.row.goodsPrice, 100) }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="buyNum" label="数量" />
                        <el-table-column label="小计">
                            <template #default="scope">
                                {{ floatDivide(scope.row.total, 100) }}
                            </template>
                        </el-table-column>
                        <el-table-column label="实付单价">
                            <template #default="scope">
                                {{ floatDivide(scope.row.sellPrice, 100) }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="changePrice" label="单价调整为" min-width="110">
                            <template #default="scope">
                                <el-form-item
                                    :prop="'goods.' + scope.$index + '.changePrice'"
                                    :rules="rules.changePrice"
                                    class="change-input">
                                    <el-input
                                        v-model.trim="scope.row.changePrice"
                                        maxlength="9"
                                        placeholder="输入价格" />
                                </el-form-item>
                            </template>
                        </el-table-column>
                        <el-table-column prop="sellPrice" label="实付金额">
                            <template #default="scope">
                                {{
                                    !scope.row.changePrice
                                        ? floatDivide(floatMultiply(scope.row.sellPrice, scope.row.buyNum), 100)
                                        : floatMultiply(scope.row.changePrice, scope.row.buyNum)
                                }}
                            </template>
                        </el-table-column>
                    </el-table>
                </el-form>
                <el-form ref="ruleLogisticsRef" v-show="deliveryType != 4" :model="Data">
                    <div class="logistics-info">
                        <div>运费</div>
                        <el-form-item prop="logisticsFee" :rules="rules.logisticsFee" class="change-input">
                            <el-input
                                class="logistics-info-input"
                                v-model.trim="Data.logisticsFee"
                                maxlength="9"
                                :disabled="Data.checked"
                                placeholder="输入价格" />
                        </el-form-item>
                        <div>元</div>
                        <el-checkbox
                            class="logistics-info-checkbox"
                            v-model="Data.checked"
                            label="直接免运费"
                            size="large" />
                        <!-- :disabled="Data.logisticsFee == '' ? false : true" -->
                    </div>
                </el-form>
            </div>
            <template #footer>
                <div style="flex: auto">
                    <el-button @click="show = false">返回</el-button>
                    <el-button type="primary" @click="clickSubmit">确定</el-button>
                </div>
            </template>
        </el-drawer>
    </div>
</template>
<script setup>
import { ref, reactive, computed, watch } from 'vue';
import { floatMultiply, floatDivide, isAmount } from '@/commons/utils';
import { ZwMessage } from '@/commons';
import request from '@/request';
import storage from '@/commons/storage';

const emit = defineEmits(['update:modelValue', 'getOrderList']);

const props = defineProps({
    modelValue: {
        type: Boolean,
        default: false
    },
    goodsInfo: {
        type: Object,
        default: () => {}
    },
    orderId: {
        type: [String, Number],
        default: ''
    },
    deliveryType: {
        type: [String, Number],
        default: ''
    }
});

const show = computed({
    get() {
        return props.modelValue;
    },
    set(val) {
        emit('update:modelValue', val);
    }
});

const validateAmount = (rule, value, callback) => {
    let index = rule.field.split('.')[1];
    if (value == '' || value == undefined) {
        callback();
    } else if (isAmount(value)) {
        let sellPrice = floatDivide(props.goodsInfo.goods[index].sellPrice, 100);
        if (value <= sellPrice) {
            callback();
        } else {
            callback(new Error('单价调整金额不能大于实付单价金额!'));
        }
    } else {
        callback(new Error('请输入正确的价格，最多保留2位小数!'));
    }
};

const validateLogisticsAmount = (rule, value, callback) => {
    if (value == '' || value == undefined) {
        callback();
    } else if (isAmount(value)) {
        callback();
    } else {
        callback(new Error('请输入正确的价格，最多保留2位小数!'));
    }
};

const ruleFormRef = ref(null);
const ruleLogisticsRef = ref(null);

const rules = reactive({
    changePrice: [{ validator: validateAmount, trigger: 'blur' }],
    logisticsFee: [{ validator: validateLogisticsAmount, trigger: 'blur' }]
});

const Data = reactive({
    logisticsType: '',
    logisticsCompany: '',
    logisticsCode: '',
    logisticsNo: '',
    list: [],
    logisticsList: [],
    logisticsListFilter: [],
    goodsSelection: [],
    logisticsFee: 0,
    // logisticsFee: floatDivide(props.goodsInfo.logisticsFee + props.goodsInfo.freeFreightFee, 100),
    checked: false
});

watch(
    () => props.modelValue,
    val => {
        if (val) {
            Data.logisticsFee = floatDivide(props.goodsInfo.logisticsFee + props.goodsInfo.freeFreightFee, 100);
            if (Data.logisticsFee == 0) {
                Data.checked = true;
            } else {
                Data.checked = false;
            }
        } else {
            Data.logisticsFee = 0;
            props.goodsInfo.goods.map(el => (el.changePrice = ''));
            ruleFormRef.value.validate();
            ruleLogisticsRef.value.validate();
        }
    }
);

const clickSubmit = () => {
    let goodsId = [];
    ruleFormRef.value.validate(rule => {
        if (rule) {
            ruleLogisticsRef.value.validate(r => {
                if (r) {
                    props.goodsInfo.goods.map(el => {
                        if (el.changePrice) {
                            goodsId.push({
                                id: el.id,
                                amount: floatMultiply(el.changePrice, 100)
                            });
                        }
                    });
                    let params = {
                        orderId: props.orderId,
                        goods: goodsId,
                        logisticsFee: Data.checked ? 0 : floatMultiply(Data.logisticsFee, 100)
                    };
                    // console.log(params, '1');
                    request('orderPriceChangeServ', params).then(res => {
                        ZwMessage.success('修改成功');
                        show.value = false;
                        emit('getOrderList');
                    });
                }
            });
        }
    });
};
</script>
<style lang="scss" scoped>
.modify-popup-main {
    .modify-table {
        .title {
            display: flex;
            align-items: center;
            margin-bottom: 12px;
            padding: 8px 11px;
            color: #666666;
            font-size: 14px;
            line-height: 20px;
            background: #fff6f0;
            img {
                margin-right: 8px;
                width: 14px;
                height: 14px;
            }
        }
        .change-input {
            margin: 28px 0;
        }
        .logistics-info {
            margin-top: 16px;
            display: flex;
            align-items: center;
            .logistics-info-input {
                margin: 0 8px;
                width: 90px;
            }
            .logistics-info-checkbox {
                margin-left: 40px;
            }
        }
    }
}
</style>
